<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.3.2/dist/vue-router.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.2/src/httpVueLoader.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
    <!-- 引入qs -->
    <script src="https://cdn.jsdelivr.net/npm/qs@6.9.3/dist/qs.js"></script>
    <style>
        html,body,#app{
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        .m-header{
            height: 80px;
            border-bottom: #EEEEEE solid 1px;
        }
        .nav{
            min-height: 350px;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <el-row type="flex" justify="center" class="m-header">
                <el-col :span="20"><div class="grid-content bg-purple-dark">欢迎光临网络中心</div></el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="4">
                    <!-- 使用 router-link 组件来导航. -->
                    <!-- 通过传入 `to` 属性指定链接. -->
                    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

                    <el-menu class="el-menu-vertical-demo nav">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span slot="title">管理教室</span>
                            </template>
                            <el-menu-item index="1-1" v-for="(item,index) in rooms">
                                <router-link :to="`/custom_room/${item.code}`" @click.native="">{{item.name}}</router-link>
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">中心介绍</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="16" style="padding-left: 10px;">
                    <!-- 路由出口 -->
                    <!-- 路由匹配到的组件将渲染在这里 -->
                    <router-view></router-view>
                </el-col>
            </el-row>
        </div>
    </div>

    <!-- 自定义js -->
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
</body>
</html>
